<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">运行监测</el-breadcrumb-item>
        <el-breadcrumb-item>输电通道监测</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset">
        <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" />
          </el-form-item>
        </el-form>
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" />
    </div>
    <el-dialog title="查看图片" style="width: 100%; height: 100%" append-to-body :visible.sync="dialogVisible">
      <img width="100%" src="../../assets/img/shuzhang.png" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { doPageList } from "@/api/EarlyWarningManagement/yjxxsj";
import { GetOrgTree } from "@/api/common.js";
export default {
  name: "InformationList",
  components: {},
  data() {
    return {
      dialogVisible: false,
      formData: [
        {
          elType: "lsdTree",
          id: "ssdw",
          name: "distributeTaskId",
          treeRef: "treeRef",
          keyWord: "keyWord",
          commonClick: true,
          label: "所属单位",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "select",
          id: "ywbz",
          label: "运维班组",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [
            { label: "运维检修一班", value: "0" },
            { label: "运维检修二班", value: "1" },
            { label: "运维检修三班", value: "2" }
          ]
        }
      ],
      // 表格信息
      table: {
        // isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "输电通道监测列表",
        actions: [
        ],
        tableData: [],
        columns: [
          {
            prop: "xlmc",
            label: "线路名称",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "dydj",
            label: "电压等级",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "ssdw",
            label: "所属单位",
            align: "left",
            "min-width": "120px"
          },
          {
            prop: "ywbz",
            label: "运维班组",
            align: "center"
          },
          {
            prop: "yclx",
            label: "异常类型",
            align: "center"
          },
          {
            prop: "cz",
            label: "图片",
            align: "center",
            fixed: "right",
            "min-width": "100px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.HanEdit(row);
                          }
                        }
                      }}
                    >
                      {"查看"}
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "430px",
          // height: "430px",
          border: true,
          fit: true,
          stripe: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      form: {}, // 筛选from
      pageNum: 1,
      pageSize: 10,
      fid: ""
    };
  },
  created() {
    this.getInputVal();
    this.list();
  },
  methods: {
    // 获取下拉框数据
    getInputVal() {
      GetOrgTree().then(res => {
        this.$nextTick(() => {
          this.$set(this.formData[0].treeData.attrs, "data", res);
        });
      });
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.list();
    },
    // 检索
    async query() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ssdw: this.form.ssdw,
        ywbz: this.form.ywbz
      };
      const res = await doPageList(parmas);
      res.data.push({
        xlmc: "35kV编钟变电站",
        dydj: "35kV",
        ssdw: "国网随州供电公司",
        ywbz: "运维检修一班",
        yclx: "树障"
      });
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ssdw: this.form.ssdw,
        ywbz: this.form.ywbz
      };
      const res = await doPageList(parmas);
      res.data.push({
        xlmc: "35kV编钟变电站",
        dydj: "35kV",
        ssdw: "国网随州供电公司",
        ywbz: "运维检修一班",
        yclx: "树障"
      });
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 编辑
    HanEdit(id) {
      this.dialogVisible = true;
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    }
  }
};
</script>

<style scoped lang="less">
@import "../../assets/style/common.less";
@import "../../assets/style/ComponentStyle.less";
@import "../../assets/style/pop-upNotification.less";
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
  background-color: #f8f9f8; /*隔行变色*/
}
//鼠标悬浮样式
:deep(tr.hover-row) {
  &,
  &.el-table__row--striped {
    &,
    &.current-row {
      > td.el-table__cell {
        background: none;
      }
    }
  }
}
.EmergencyList {
  height: 97% !important;
}
.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}
:deep(.el-dialog__header) {
  background: #5077ff;
  display: flex;
  padding: 16px !important;
  align-items: center;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn {
    font-size: 24px;
  }
  .el-dialog__close {
    color: #fff;
  }
}
:deep(.el-dialog__body) {
  padding: 16px;
}
</style>
